<template>
	<view class="container">
		<u-navbar :is-back="true" z-index="1001">
			<view v-if="platFromType==1" class="slot-content" style="width: 100%;text-align: center;">
				<u-button :customStyle="{'width':'60%',border:'none'}" size="medium" :hair-line="false"
					hover-class="none" @click="showFileTypeModal">
					<text style="font-weight: bold; margin-right: 16rpx;font-size: 34rpx;color: #19be6b;">{{title}}</text>
					<u-icon color="#19be6b" name="arrow-down" size="26" v-if="!showModel"></u-icon>
					<u-icon color="#19be6b" name="arrow-up" size="26" v-if="showModel"></u-icon>
				</u-button>
			</view>
			<view v-else class="slot-content" style="width: 100%;text-align: center;">
				<text style="font-weight: bold; margin-right: 16rpx;font-size: 34rpx;color: #19be6b;">{{title}}</text>
			</view>
			<view slot="right" style="margin-right: 20rpx;">
				<u-button v-if="fileType===1" @click="sendModalShowFlag=true" size="mini"
					:disabled="chatSelectedFiles.length<1" type="success"> 发送({{chatSelectedFiles.length}}/9)
				</u-button>
				<u-button v-if="fileType===2" @click="sendModalShowFlag=true" size="mini"
					:disabled="sysSelectedFiles.length<1" type="success"> 发送({{sysSelectedFiles.length}}/9) </u-button>
			</view>
		</u-navbar>
		<!-- 导航啦下拉选择文件类型 -->
		<view>
			<u-popup z-index="1000" v-model="showModel" mode="top" :mask="false" :customStyle="popCustomStyle">
				<u-cell-group>
					<u-cell-item bg-color="#f3f4f6" :border-bottom="true" :arrow="false" @click="selectedFileType(item)"
						:title="item.label" v-for="(item,index) in fileTypeOptions">
						<u-icon slot="right-icon" name="checkmark" size="28" v-show="item.label===title"></u-icon>
					</u-cell-item>
				</u-cell-group>
			</u-popup>
		</view>
		<template v-if="showModel==false">
			<!-- 搜索 -->
			<!-- <view class="slot-wrap" v-if="fileType===1" style="height: 50px;width: 100%;">
				
			</view> -->
			<!--聊天中的文件列表-->
			<scroll-view v-if="fileType===1&&chatFileList.length > 0" class="scrollList" 
				:scroll-y="true" :scroll-x="false" enable-back-to-top
				:scroll-into-view="scrollViewId" @scrolltolower="loadMore()" lower-threshold="10"
				:style="'height:'+winHeight+'px'">
				<view class="list" v-if="fileType===1">
					<view class="flex_col" v-for="(fileObj,key) in chatFileList" :key="key">
						<view style="text-align: center;" @click="chooseFile(fileObj,key)">
							<view v-show="fileObj.isChecked==true">
								<image style="width: 40upx;height: 40upx;" mode="aspectFill"
									src="@/static/image/fileType/radioCheck.png"></image>
							</view>
							<view v-show="fileObj.isChecked==false">
								<image style="width: 40upx;height: 40upx;" mode="aspectFill"
									src="@/static/image/fileType/radioNoCheck.png"></image>
							</view>
						</view>
						<image v-if="fileObj.fileSuffix === 'xls'" src="@/static/image/fileType/xls.png"
							mode="aspectFill"></image>
						<image v-else-if="fileObj.fileSuffix==='doc'" src="@/static/image/fileType/docx.png"
							mode="aspectFill"></image>
						<image v-else-if="fileObj.fileSuffix==='txt'" src="@/static/image/fileType/txt.png"
							mode="aspectFill"></image>
						<image v-else-if="fileObj.fileSuffix==='ppt'" src="@/static/image/fileType/ppt.png"
							mode="aspectFill"></image>
						<image v-else-if="fileObj.fileSuffix==='pdf'" src="@/static/image/fileType/pdf.png"
							mode="aspectFill"></image>
						<image v-else-if="fileObj.fileSuffix==='zip'" src="@/static/image/fileType/zip.png"
							mode="aspectFill"></image>
						<image v-else-if="fileObj.fileSuffix==='img'" :src="fileObj.fileUrl" 
							mode="aspectFill"></image>	
						<image v-else src="@/static/image/fileType/unknowfile.png"
							mode="aspectFill"></image>
							
						<view class="flex_grow"  @click="downloadFile(fileObj)">
							<view class="flex_col">
								<view class="flex_grow">
									<view class="info" style="font-size: 32upx;color: rgba(74,74,74,1)">
										{{fileObj.fileName==null?'未知':fileObj.fileName}}</view>
								</view>
							</view>
							<view class="flex_col">
								<view class="fileSize">{{fileObj.fileSize}}</view>
								<view class="uploadTime">{{fileObj.createTime}}</view>
							</view>
						</view>
						<view style="text-align: center;" @click="downloadFile(fileObj)">
							<u-icon name="eye-fill" color="#19be6b" size="44"></u-icon>
						</view>
					</view>
				</view>
			</scroll-view>
			<!--系统中的文件列表-->
			<scroll-view v-if="fileType===2&&sysFileList.length > 0" class="scrollList" 
				:scroll-y="true" :scroll-x="false"
				:style="'height:'+winHeight+'px'">
				<view class="list" v-if="fileType===2">
					<view class="flex_col" v-for="(fileObj,key) in sysFileList" :key="key">
						<view style="text-align: center;" @click="chooseSysFile(fileObj,key)">
							<view v-show="fileObj.isChecked===true">
								<image style="width: 40upx;height: 40upx;" mode="aspectFill"
									src="@/static/image/fileType/radioCheck.png"></image>
							</view>
							<view v-show="fileObj.isChecked===false">
								<image style="width: 40upx;height: 40upx;" mode="aspectFill"
									src="@/static/image/fileType/radioNoCheck.png"></image>
							</view>
						</view>
						<image v-if="fileObj.fileSuffix === 'xls'" src="@/static/image/fileType/xls.png"
							mode="aspectFill"></image>
						<image v-else-if="fileObj.fileSuffix==='doc'" src="@/static/image/fileType/docx.png"
							mode="aspectFill"></image>
						<image v-else-if="fileObj.fileSuffix==='txt'" src="@/static/image/fileType/txt.png"
							mode="aspectFill"></image>
						<image v-else-if="fileObj.contentType===2"
							:src="fileObj.url==null?fileObj.fileUrl:fileObj.url"
							mode="aspectFill"></image>
						<image v-else-if="fileObj.fileSuffix==='ppt'" src="@/static/image/fileType/ppt.png"
							mode="aspectFill"></image>
						<image v-else-if="fileObj.fileSuffix==='pdf'" src="@/static/image/fileType/pdf.png"
							mode="aspectFill"></image>
						<image v-else-if="fileObj.fileSuffix==='zip'" src="@/static/image/fileType/zip.png"
							mode="aspectFill"></image>
						<image v-else src="@/static/image/fileType/unknowfile.png" mode="aspectFill"></image>
						<view class="flex_grow">
							<view class="flex_col">
								<view class="flex_grow">
									<view class="info" style="font-size: 32upx;color: rgba(74,74,74,1)">
										{{fileObj.fileName==null?'未知':fileObj.fileName}}</view>
								</view>
							</view>
							<view class="flex_col">
								<view class="fileSize">{{fileObj.fileSize}}</view>
							</view>
						</view>
						<view style="text-align: center;" @click="downloadFile(fileObj)">
							<u-icon name="eye-fill" color="#19be6b" size="44"></u-icon>
							<!--#19be6b-->
						</view>
					</view>
				</view>
			</scroll-view>
		</template>
		<!--内容为空显示-->
		<view v-if="(chatFileList.length<1&&fileType===1)||(fileType===2&&sysFileList.length <1)" class="data-empty">
			<u-empty :mode="emptyMode" icon-size="150"></u-empty>
		</view>
		<!-- 选择文件 -->
		<chooseFileAndroid ref="filemanager" @result="resultPath"></chooseFileAndroid>
		<!--发送文件确认框-->
		<u-modal v-model="sendModalShowFlag" content="是否确认发送文件到群聊天?" :show-confirm-button="true"
			:show-cancel-button="true" @confirm="sendFiles" @cancel="cancelSendFile">
		</u-modal>
	</view>
</template>

<script>
	import permission from '@/util/mobilePermission/permission.js';
	import chooseFileAndroid from '@/components/chooseDevieFiles/chooseFile-Android.vue';
	export default {
		components: {
			chooseFileAndroid
		},
		data() {
			return {
				platFromType:0, //0安卓以外其他 ,1安卓
				pageNum: 1,
				pageSize: 10,
				winHeight: 0,
				showModel: false,
				fileType: 1,
				fileTypeOptions: [{
					label: '聊天中的文件',
					value: 1
				}, {
					label: '手机系统文件',
					value: 2
				}],
				title: "聊天中的文件",
				popCustomStyle: {
					height: '210upx',
					marginTop: '140upx',
					textAlign: 'center',
					paddingRight: '20upx',
					paddingLeft: '20upx',
					backgroundColor: "#f3f4f6"
					//borderBottom:'1px solid red'
				},
				//搜索词
				searchWords: '',
				//系统中的文件
				sysFileList: [],
				//文件列表
				chatFileList: [{
						fileType: 'txt',
						name: '1.txt',
						'fileSize': '10kb',
						'createTimeStr': '16:31',
						"isChecked": false
					},
					{
						fileType: 'png',
						name: '2.txt',
						'fileSize': '100kb',
						'createTimeStr': '16:35',
						"isChecked": true
					}
				],
				//已经选择的聊天中的文件
				chatSelectedFiles: [],
				//已经选择的系统中的文件
				sysSelectedFiles: [],
				//列表锚点
				scrollViewId: '',
				//内容为空展示
				emptyMode: 'list',
				//发送文件确认框标志
				sendModalShowFlag: false,
				maxFileSize: 314572800,
			};
		},
		onLoad(option) {
			let that = this;
			console.log("option==", option);
			if (uni.getSystemInfoSync().platform === "android") {
				this.platFromType=1;
			}else{
				this.platFromType=0;
			}	
			let winHeight = uni.getSystemInfoSync().windowHeight;
			this.winHeight = winHeight-90;
			let currentUserId = that.vuex_userInfo.id;
			that.sysFileList = [];
			that.sysSelectedFiles = [];
			that.chatFileList = [];
			this.getChatFileList();
		},
		onShow: function() {
			let that = this;
			that.showModel = false;
			that.emptyMode = "list";
		},
		methods: {
			//打开文件选择弹窗
			showFileTypeModal: function() {
				let that = this;
				that.showModel = !that.showModel;
			},
			//选择文件类型
			selectedFileType: function(item) {
				let that = this;
				//改变导航拦标题
				that.title = item.label;
				//关闭文件类型选择弹出
				that.showModel = false;
				//当前选择的文件类型
				that.fileType = item.value;
				if (this.fileType === 2) {
					//读取手机内存文件
					if (uni.getSystemInfoSync().platform === "android") {
						const plugin = uni.requireNativePlugin('GuoWei-SelectFileModule')
						plugin.chooseFile({
							count: 10,
						}, result => {
							console.log("选择文件回调结果", result)
							let filePathArr = result.files;
							// util.utilLoading("正在上传文件...");
							if (filePathArr.length > 0) {
								console.log("=========filePathArr====", filePathArr);
								for (let i = 0; i < filePathArr.length; i++) {
									let fileObj = filePathArr[i];
									let fileSuffix = fileObj.suffix;
									let filePath = fileObj.url;
									let name = fileObj.name;
									console.log("fileObj", fileObj);
									let msg = {
										"fileSuffix": fileSuffix,
										"fileName": name,
										"filePath": filePath
									};
									if (fileSuffix == ".jpg" || fileSuffix == ".JPG" || fileSuffix ==
										".JPEG" || fileSuffix == ".jpeg" || fileSuffix == ".png" ||
										fileSuffix == ".PNG" || fileSuffix == ".gif" || fileSuffix == ".GIF") {
										msg.type = "img";
										msg.width = 350;
										msg.height = 350;
									} else {
										msg.type = "file";
									}
									//that.uploadFile(msg);
								}
							} else {
								this.globalUtil.utilAlert("没有选中的文件!", "none");
								return;
							}
						})

					} else {
						this.globalUtil.utilAlert("系统不支持!", "warning");
						return;
					}
				}
			},
			//搜索聊天中的文件
			searchChattingFiles: function() {
				let that = this;
				that.emptyMode = "search";
				let searchWords = that.searchWords;
				let currentUserId = that.vuex_userInfo.id;
				that.chatFileList = [];
				that.getChatFileList();
			},
			//获取聊天中的文件
			getChatFileList:function(){
				let that=this;
				let param={
					prefixDir:'chattingFiles',	
					nextMarker:'',
				};
				if(that.chatFileList.length>0){
					param.nextMarker=that.chatFileList[that.chatFileList.length-1].id;
				}
				console.log("获取聊天中的文件的参数",param);
				this.$u.api.sys.getChatFileList(param).then(res => {
					console.log("聊天中的文件",res);
					if (res != null && res.data != null && res.code === 200) {
						let list = res.data;
						if (list.length > 0) {
							that.chatFileList = that.chatFileList.concat(list);
							uni.hideLoading();
						} else {
							this.globalUtil.utilAlert("暂无更多记录!", "warning");
							uni.hideLoading();
						}
						console.log("聊天中的文件列表", that.chatFileList);
						return;
					} else {
						uni.hideLoading();
					}
				}).catch(res => {
					console.log("获取群聊文件出发异常", res);
					uni.hideLoading();
				})
			},
			
			//选择聊天中的文件
			chooseFile: function(fileObj, key) {
				let that = this;
				let index;
				if (that.chatSelectedFiles.length >= 9) {
					index = that.chatSelectedFiles.findIndex(function(obj) {
						return obj.id === fileObj.id
					})
				}
				if (index === -1) {
					this.globalUtil.utilAlert("最多能勾选9个", 'warning');
					return;
				}
				that.chatFileList[key].isChecked = !this.chatFileList[key].isChecked;
				//如果选中的列表为空,并且当前点击的文件isChecked等于true,就放入已选择的列表中
				if (that.chatSelectedFiles.length === 0) {
					if (fileObj.isChecked === true) {
						that.chatSelectedFiles.push(fileObj);
					}
				} else {
					let j = -1;
					for (let i = 0; i < that.chatSelectedFiles.length; i++) {
						if (fileObj.id === that.chatSelectedFiles[i].id) {
							//当存在，再次点击说明需要取消选中
							if (fileObj.isChecked === false) {
								//说明是选中的状态
								j = i;
								break;
							}
						}
					}
					if (j !== -1) {
						//表示先获取这个元素的下标，然后从这个下标开始计算，删除长度为1的元素
						that.chatSelectedFiles.splice(j, 1);
						// this.chatSelectedFiles.pop(j);
					} else {
						that.chatSelectedFiles.push(fileObj);
					}
				}
			},
			//选择系统中的文件
			chooseSysFile: function(fileObj, key) {
				let that = this;
				let index;
				if (that.sysSelectedFiles.length >= 9) {
					index = that.sysSelectedFiles.findIndex(function(obj) {
						return obj.fileName === fileObj.fileName
					})
				}
				if (index === -1) {
					this.globalUtil.utilAlert("最多能勾选9个", 'warning');
					return;
				}
				that.sysFileList[key].isChecked = !this.sysFileList[key].isChecked;
				//如果选中的列表为空,并且当前点击的文件isChecked等于true,就放入已选择的列表中
				if (that.sysSelectedFiles.length === 0) {
					if (fileObj.isChecked === true) {
						that.sysSelectedFiles.push(fileObj);
					}
				} else {
					let j = -1;
					for (let i = 0; i < that.sysSelectedFiles.length; i++) {
						if (fileObj.fileName === that.sysSelectedFiles[i].fileName) {
							//当存在，再次点击说明需要取消选中
							if (fileObj.isChecked === false) {
								//说明是选中的状态
								j = i;
								break;
							}
						}
					}
					if (j !== -1) {
						//表示先获取这个元素的下标，然后从这个下标开始计算，删除长度为1的元素
						that.sysSelectedFiles.splice(j, 1);
						// this.chatSelectedFiles.pop(j);
					} else {
						that.sysSelectedFiles.push(fileObj);
					}
				}
			},
			//发送文件
			sendFiles: function() {
				let that = this;
				let sendFiles = [];
				//发送聊天中的文件
				if (that.fileType === 1) {
					sendFiles = that.chatSelectedFiles;
				}
				//发送系统文件
				if (that.fileType === 2) {
					sendFiles = that.sysSelectedFiles;
				}
				if (sendFiles.length > 0 && sendFiles.length < 10) {
					uni.$emit("selectedFiles", sendFiles);
					uni.hideLoading();
					uni.navigateBack({
						delta: 1,
						animationType: 'pop-out',
						animationDuration: 200
					});
				} else if (sendFiles.length > 9) {
					this.globalUtil.utilAlert("最多能选择9个!", "warning");
					return;
				} else {
					this.globalUtil.utilAlert("发送文件为空!", "error");
					return
				}
			},
			//取消发送
			cancelSendFile: function() {
				let that = this;
				that.sendModalShowFlag = false;
				//that.fileType=1;
				//that.title="聊天中的文件";
				that.showModel = false;
			},
			//下拉翻页加载列表
			loadMore: function() {
				let that = this;
				that.getChatFileList();
			},
			//下载并打开文件
			downloadFile: function(fileItem) {
				console.log("fileItem", fileItem);
				let fileSuffix = fileItem.fileSuffix;
				let fileUrl = fileItem.fileUrl == null ? fileItem.url : fileItem.fileUrl;
				console.log("fileUrl", fileUrl);
				if (fileUrl.length < 1) {
					return;
				}
				if (fileSuffix === "img") {
					// 预览图片
					uni.previewImage({
						urls: [fileUrl],
						indicator: "none"
					});
				} else {
					const office = uni.requireNativePlugin('Jiang-OfficeView');
					let fileName = fileItem.fileName;
					office.open({
						url: fileUrl,
						topBarColor: '#3394EC',
						title: fileName,
						fileType: fileSuffix
					}, result => {
						if (result.code == 1) {
							this.globalUtil.utilAlert("打开成功");
						}
					});
					return;
				}
			},
			//读取手机内存选择文件的回调
			resultPath: function(filePathArr) {
				let that = this;
				// that.sysFileList=[];
				console.log("=========filePathArr====", filePathArr);
				if (typeof(filePathArr) != "undefined" && filePathArr.length > 0) {
					for (let i = 0; i < filePathArr.length; i++) {
						let e = filePathArr[i];
						if (null != e && e.indexOf("/") !== -1) {
							let pathArr = e.split("/");
							let fileName = pathArr[pathArr.length - 1];
							let fileTypeArr = fileName.split(".");
							let fileSuffix = fileTypeArr[fileTypeArr.length - 1];
							let msg = {};
							if (fileSuffix == "jpg" || fileSuffix == "JPG" || fileSuffix == "JPEG" || fileSuffix ==
								"jpeg" || fileSuffix == "png" || fileSuffix == "PNG" || fileSuffix == "gif" ||
								fileSuffix == "GIF") {
								msg = {
									"filePath": "file://" + e,
									"type": "img",
									"width": 350,
									"height": 350
								};
							} else {
								msg = {
									"filePath": "file://" + e,
									"type": "file",
									"fileName": fileName,
									"fileSuffix": fileSuffix
								};
							}
							//that.uploadFile(msg);
						}
					}
				} else {
					this.globalUtil.utilAlert("没有选中的文件!", "none");
					return;
				}
			},
		
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.slot-wrap {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			padding: 0 30rpx;
		}

		.scrollList {
			//border: 1px solid red;
			::-webkit-scrollbar{
				display: none;
				height: 0;
				width: 0;
			}
			/* 列表 */
			.list {
				background-color: #fff;
				font-size: 28upx;
				color: #333;
				user-select: none;
				touch-callout: none;

				&>view {
					padding: 24upx 30upx;
					position: relative;

					&:active,
					&.active {
						background-color: #f3f3f3;
					}

					image {
						height: 80upx;
						width: 80upx;
						border-radius: 4px;
						margin-right: 20upx;
					}

					&>view {
						line-height: 50upx;

						.time,
						.info {
							color: #999;
							font-size: 24upx;
						}

						.time {
							text-align: right;
						}

						.info {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							width: 100%;
						}
					}
				}

				&>view:not(:first-child) {
					margin-top: 1px;

					&::after {
						content: '';
						display: block;
						height: 0;
						border-top: #CCC solid 1px;
						width: 620upx;
						position: absolute;
						top: -1px;
						right: 0;
						transform: scaleY(0.5);
						/* 1px像素 */
					}
				}
			}


			/* 列式弹性盒子 */
			.flex_col {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: flex-start;
				align-items: center;
				align-content: center;
			}

			/* 弹性盒子弹性容器 */
			.flex_col .flex_grow {
				width: 0;
				-webkit-box-flex: 1;
				-ms-flex-positive: 1;
				flex-grow: 1;
			}

			.flex_row .flex_grow {
				-webkit-box-flex: 1;
				-ms-flex-positive: 1;
				flex-grow: 1;
			}

			/* 弹性盒子允许换行 */
			.flex_col.flex_wrap {
				-ms-flex-wrap: wrap;
				flex-wrap: wrap;
			}

			.fileSize {
				width: 30%;
				text-align: left;
				margin-right: 30upx;
				color: #D8D8D8;
			}

			.uploadTime {
				width: 60%;
				text-align: right;
				margin-right: 10upx;
				color: #D8D8D8;
			}

		}

	}
</style>
